<template>
  <div class="CommodityClassify">
      <el-cascader :options="options" @change="handleChange" :value="inner_value" :disabled="injectedModeType.mode == 'preview'" ref="select"></el-cascader>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop, Watch, Emit, Inject, Model} from 'vue-property-decorator';
import {CascaderOption, ClassifyProperties, ClassifyTreeDto, OptionType} from "./type";
import masterModal from "../../../../../api/module/masterModal";
import {CommonResult} from "../../../plugins/dto";
@Component({
    name: "CommodityClassify",
    model: {
        prop: "value",
        event: "update"
    }
})
export default class CommodityClassify extends Vue{
    @Prop({default: {}})value:ClassifyProperties = {    
      "classFirst": "",
      "classFourth": "",
      "classSecond": "",
      "classThird": ""};
    options:CascaderOption[] = [] as any
    inner_value:string[] = []
    @Inject('modeType') injectedModeType!: {mode: string};
    @Emit("update")
    handleUpdate(value:ClassifyProperties){
        return value
    }
    
    @Watch("value", {immediate: true, deep: true})
    handleValueChange(value:ClassifyProperties){
        if(value.classFourth && value.classThird && value.classSecond){
            this.inner_value = [value.classFirst, value.classSecond, value.classThird, value.classFourth];
            return
        }
        if(value.classSecond && value.classThird){
            this.inner_value = [value.classFirst, value.classSecond, value.classThird]
            return
        }
        if(value.classSecond){
            this.inner_value = [value.classFirst, value.classSecond]
            return;
        }
        this.inner_value = [value.classFirst]
    }
    async mounted(){
        //获取商品分类数据
        const res:CommonResult<ClassifyTreeDto[]> = await masterModal.getClassifyData()
        if(res.code === 200 && res.data){
          function mapToTree(data:ClassifyTreeDto[]){
            return data.map(item => {
              let children: OptionType[] = []
              if(item.children && item.children.length){
                children = mapToTree(item.children)
              }
              if(children.length){
                return {label:item.name, value:item.code, children}
              } else {
                return {label:item.name, value:item.code}
              }
            })
          }
          this.options = mapToTree(res.data)
        }
    }
    focus(){
      //@ts-ignore
      this.$refs.select.focus()
    }
    handleChange(value:string[]){
        if(value.length === 1){
            this.inner_value = [value[0]]
            this.handleUpdate({classFirst: value[0]})
        }
        if(value.length === 2){
            this.inner_value = [value[0], value[1]]
            this.handleUpdate({classFirst: value[0], classSecond: value[1]})
        }
        if(value.length === 3){
            this.inner_value = [value[0], value[1], value[2]]
            this.handleUpdate({classFirst: value[0], classSecond: value[1], classThird: value[2]})
        }
        if(value.length ===4){
            this.inner_value = [value[0], value[1], value[2], value[3]]
            this.handleUpdate({classFirst: value[0], classSecond: value[1], classThird: value[2], classFourth: value[3]})
        }

    }
}
</script>

<style lang="scss" scoped>
  .CommodityClassify{
    ::v-deep .el-input.is-disabled .el-input__inner {
      text-overflow: clip;
    }
  }
</style>